<template>
	<view class="page container">
		<view class="h-28"></view>
		<view class="bgc-fff pad-28 c-666 fs-32 mar-32  " style="border-radius: 20rpx;">
			<view class="flex-between-center ">
				<picker mode="selector" :range="provinceList" range-key="name" @change="confirmPro">
					<view class="flex-center-center " style="line-height: 1;">
						{{form.province||'请选择'}} <u-icon name="arrow-right" color="#666"></u-icon>
					</view>
				</picker>
				<picker mode="selector" :range="cityList" range-key="name" @change="confirmCity">
					<view class="flex-center-center " style="line-height: 1;">
						{{form.city||'请选择'}} <u-icon name="arrow-right" color="#666"></u-icon>
					</view>
				</picker>
				<picker mode="selector" :range="areaList" range-key="name" @change="confirmArea">
					<view class="flex-center-center " style="line-height: 1;">
						{{form.region||'请选择'}} <u-icon name="arrow-right" color="#666"></u-icon>
					</view>
				</picker>
			</view>
			<view class="address">
				<view class="">
					详细信息
				</view>
				<input placeholder="请输入详细地址" v-model="form.addr" type="text" />
			</view>

		</view>
		<view class="bgc-fff pad-28 c-666 fs-32 mar-32  " style="border-radius: 20rpx;">
			<view class="fs-30">
				收件人
			</view>
			<input placeholder="请输入" v-model="form.realname" type="text" />
			<view class="fs-30">
				手机号
			</view>
			<input placeholder="请输入" v-model="form.phone" type="text" />

			<view class="fs-30">
				是否默认
			</view>
			<view class="">
				<u-radio-group v-model="is_default">
					<u-radio shape="circle" :customStyle="{margin: '8px'}" label="是" name="1">
					</u-radio>
					<u-radio shape="circle" :customStyle="{margin: '8px'}" label="否" name="0">
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="add" @click="saveAdd">
			保存
		</view>
		<view class="del" @click="del">
			删除
		</view>
	</view>
</template>

<script>
	import {
		getProvince,
		getCity,
		addAddr,
		editAddr,
		delAddr
	} from "@/services/home.js";
	import {
		mapState,
		mapActions
	} from "vuex";
	export default {
		components: {

		},
		data() {
			return {
				overlay_show: false,
				viewType: "list",
				dataList: [],
				params: {
					title: "",
					lat: "",
					lng: "",
				},
				selectedValues: {},

				show: false,
				provinceList: [],
				cityList: [],
				areaList: [],

				form: {
					realname: "",
					region: "",
					addr: "",
					is_default: "1",
					user_id: '',
					phone: "",
					city: '',

					province: "",
				}


			};
		},
		computed: {
			...mapState({
				userInfo: (state) => state.user.userInfo,
			}),
		},
		onLoad(opt) {
			//获取当前经纬度
			if (opt.data) {
				this.form = JSON.parse(opt.data)
			}
			this.getUserInfo().then(() => {
				this.form.user_id = this.userInfo.id

			});
			// this.$refs.pagingRef?.reload();
			this.queryList()

		},

		methods: {
			...mapActions({
				getUserInfo: "user/getUserInfo",
			}),
			showPro() {
				this.show = true
			},
			queryList() {
				getProvince().then(res => {
					console.log(res)
					this.provinceList = res.data
				})
			},
			confirmPro(e) {

				const cur = this.provinceList[e.detail.value]
				this.form.province = cur.name
				this.form.city = ''
				this.form.region = ''
				this.getCity(cur.code)
			},
			confirmCity(e) {
				const cur = this.cityList[e.detail.value]
				this.form.city = cur.name
				this.form.region = ''
				this.getArea(cur.code)
			},
			confirmArea(e) {
				const cur = this.areaList[e.detail.value]
				this.form.region = cur.name

			},
			getCity(id) {
				getCity({
					code: id,
					level: 2
				}).then(res => {
					this.cityList = res.data
				})
			},
			getArea(id) {
				getCity({
					code: id,
					level: 3
				}).then(res => {
					this.areaList = res.data
				})
			},
			del(){
				let vm = this
				uni.showModal({
					content:'确认要删除该地址吗?',
					success:function(res){
						if(res.confirm){
							delAddr({id:vm.form.id}).then(res=>{
								console.log(res)
								if(res.code==1){
									uni.showToast({
										title:'删除成功'
									})
									setTimeout(()=>{
									uni.navigateBack()	
									},1000)
								}
							})
						}
					}
				})
			},
			saveAdd() {
				if (!this.form.province) return uni.showToast({
					title: '请选择省份',
					icon: 'none'
				})
				// if(!this.form.city) return uni.showToast({
				// 	title:'请选择市区',
				// 	icon:'none'
				// })
				if (!this.form.addr) return uni.showToast({
					title: '请输入详细地址',
					icon: 'none'
				})
				if (!this.form.realname) return uni.showToast({
					title: '请输入收件人姓名',
					icon: 'none'
				})
				if (!this.form.phone) return uni.showToast({
					title: '请输入收件人手机号',
					icon: 'none'
				})

				if (!/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(this.form.phone)) return uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				if (this.form.id) {

					editAddr(this.form).then(res => {
						console.log(res)
						if(res.code==1){
							uni.showToast({
								title:'编辑成功',
								
							})
							setTimeout(()=>{
									uni.navigateBack()
							},1000)
						}
					})
				} else {
					addAddr(this.form).then(res => {
						if(res.code==1){
							uni.showToast({
								title:'编辑成功',
								
							})
							setTimeout(()=>{
									uni.navigateBack()
							},1000)
						}
					})
				}

			}


		},
	};
</script>

<style lang="scss" scoped>
	.filter-container {
		display: flex;
		width: 100%;
		background-color: #fff;
		position: relative;
		z-index: 100;
	}

	.filter-tab {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12px 0;

		.arrow {
			font-size: 12px;
			margin-left: 4px;
			transition: transform 0.3s;
			color: #999;

			&.arrow-up {
				transform: rotate(180deg);
			}
		}
	}

	.page {
		background-color: #EFEFEF;

		.page-top {
			padding-bottom: 28rpx;

			.search-box {
				position: relative;
				z-index: 999;
			}
		}

		.filter-wrapper {
			position: relative;
			z-index: 100;
		}

		.list {
			// display: flex;
			// flex-wrap: wrap;
			// justify-content: space-between;
			padding: 0 20rpx;

			.item {
				display: flex;
				align-items: center;
				position: relative;
				flex-direction: column;
				width: 100%;
				margin-bottom: 32rpx;
				box-sizing: border-box;
				border-radius: 16rpx;

				.detail-btn {
					position: absolute;
					right: 28rpx;
					bottom: 28rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #fff;
					background-color: $theme_color;
				}

				.texts {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					width: 100%;
					margin-top: 16rpx;
					// height: 216rpx;
					// margin-left: 24rpx;

					&>view {
						font-size: 28rpx;

						&>text:first-child {
							color: #677585;
						}
					}
				}
			}
		}
	}

	.tabs {
		font-weight: 400;
		font-size: 28rpx;
		margin: 30rpx;
		color: #3C3C3C;

		.on {
			font-weight: 700;
			font-size: 28rpx;
			color: #E61E1E;
		}
	}

	input {
		background-color: rgba(143, 146, 161, 0.08);
		height: 96rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
		color: #333333;
		line-height: 96rpx;
		padding: 0 32rpx;
		margin: 20rpx 0;
	}

	.address {
		margin-top: 54rpx;
	}

	.add {
		margin: 0 auto;
		width: 690rpx;
		height: 90rpx;
		background: #CC0000;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		color: #fff;
		text-align: center;
		line-height: 90rpx;
	}
	.del{
		margin: 50rpx auto 0;
		width: 690rpx;
		height: 90rpx;
		border: 1px solid #CC0000;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		color: #CC0000;
		text-align: center;
		line-height: 90rpx;
	}
</style>